<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <div class="home-nav">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
        <div class="avatar">
          <img src="../assets/2.jpg" alt="" class="avatarImg" />
        </div>
        <el-menu-item index="1">后台管理系统</el-menu-item>
        <div class="avatar_down">
          <el-dropdown>
            <el-button type="primary">
              <img src="../assets/1.jpg" alt="" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>客服</el-dropdown-item>
              <el-dropdown-item>设置</el-dropdown-item>
              <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-menu>
    </div>
    <!-- 主体区域 -->
    <div class="home-main">
      <!-- 侧边栏 -->
      <div class="main-aside">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px"> </el-radio-group>
        <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
          <el-submenu :index="menu.id + ''" v-for="menu in menuList" :key="menu.id">
            <template slot="title">
              <i :class="iconObj[menu.id]"> </i>

              <span slot="title">{{ menu.authName }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :index="item.id + ''" v-for="item in menu.children" :key="item.id">{{ item.authName }}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <!-- 内容区域 -->
      <div class="main-content">
        <!-- 切换展开和收起状态 -->
        <div class="toggle">
          <el-button :icon="foldIcon" @click.native="changeIsCollapse"> </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      isCollapse: false,
      foldIcon: 'el-icon-s-fold',
      // 存放菜单栏
      menuList: [],
      iconList: ['el-icon-location', 'el-icon-menu', 'el-icon-s-goods', 'el-icon-zoom-in', 'el-icon-video-camera-solid'],
      iconObj: {},
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    changeIsCollapse() {
      // 切换展开和收起
      this.isCollapse = !this.isCollapse
      // 修改符号
      this.isCollapse ? (this.foldIcon = 'el-icon-s-unfold') : (this.foldIcon = 'el-icon-s-fold')
    },
    async getMenuList() {
      const { data } = await this.$http.get('menus')
      console.log(data.data[0].authName)
      if (data.meta.status !== 200) return this.$message.err('菜单栏获取失败')
      this.menuList = data.data
      console.log(this.menuList)
      this.menuList.forEach((item, index) => {
        this.iconObj[item.id] = this.iconList[index]
      })
    },
  },
  created() {
    this.getMenuList()
  },
  // 获取左侧菜单栏
}
</script>

<style lang="less">
.el-button {
  width: 40px;
  height: 40px;
  text-align: center;
  display: flex;
  justify-content: center;
  background: none;
  border: none;
  position: relative;
  img {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.el-button--primary:hover {
  background: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.home-main {
  display: flex;
}
.avatar img{
  width: 5  0px;
  height: 50px;
  border-radius: 100%;
}
.avatar_down {
  display: inline-block;
  position: absolute;
  right: 30px;
  top: 9px;
}
.el-menu-demo {
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
}
.avatar {
  width: 50px;
  height: 50px;
  padding: 5px 0;
  margin-right: 10px;
  float: left;
  .avatarImg {
    width: 100%;
  }
}
.home-main {
  .main-content {
    flex: 1;
    padding: 20px;
    .toggle {
      .el-button {
        padding: 5px 10px;
      }
    }
  }
}
</style>
